import React from 'react';
import {Link} from 'react-router';
import {observer, useStaticRendering} from 'mobx-react';
import Store from './store';
import DevTools from 'mobx-react-devtools';
import {Spin} from 'antd';
import './index.less';
//component
import ReTextField from 'components/widgets/ReTextField';
import ReIcon from 'components/widgets/ReIcon';
import SetHelmet from 'components/widgets/SetHelmet';
import ReButton from 'components/widgets/ReButton';
import Message from 'components/services/Message';


@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };
    static defaultProps = {};


    name = 'Login';
    store = null;

    constructor(props, context) {

        super(props, context);
        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});

    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    render() {
        return (
            <div className="orin-p-login-root page-view">
                <SetHelmet title="艺维管理后台-登录"/>
                <Message/>
                <div className="login-mask-wrapper">
                    <span className="logo-wrapper">
                        <ReIcon icon="icon_logo" className="logo"/>
                    </span>
                    <div className="login-input-wrapper">
                        <p className="login-title">
                            艺维管理后台
                        </p>
                        <ReTextField
                            label=""
                            isLabel={false}
                            type="text"
                            className="form-input"
                            notfullWidth={false}
                            onChange={(e, v) => this.store.inputUserName(v)}
                            errorText={''}
                            closeIcon={true}
                            value={this.store.userName}
                            placeholder={'请输入账号、手机号'}
                            onKeyUp={(e) => this.store.enterKey(e, true)}/>
                        <ReTextField
                            label=""
                            isLabel={false}
                            type="password"
                            notfullWidth={false}
                            className="form-input"
                            onKeyUp={(e) => this.store.enterKey(e)}
                            onChange={(e, v) => this.store.inputPassword(v)}
                            closeIcon={true}
                            value={this.store.userPassword}
                            maxLength="15"
                            errorText={''}
                            placeholder={'请输入密码'}/>
                        <ReButton
                            onClick={(e) => this.store.login()}
                            className={'login-btn'}
                            label={'登录'}/>
                    </div>
                </div>
                {
                    this.store.loading &&
                    <div className="loading">
                        <Spin spinning={true} size="large" tip={$$.LN.IS_LOADING}/>
                    </div>
                }
            </div>
        );
    }
}